<template>
  <div class="usercenter">
    <div class="common-layout">
      <el-container>
        <el-aside width="250px">
          <div class="right_user">
            <div class="first">
              <h3>个人信息</h3>
            </div>
            <div class="second">
              <div class="demo-image__preview">
                <el-image
                  style="width: 100px; height: 100px"
                  src="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"
                  :zoom-rate="1.2"
                  :preview-src-list="srcList"
                  :initial-index="4"
                  fit="cover"
                />
              </div>
            </div>
            <div class="third">
              <el-row>
                <el-col :span="24" class="third_span">
                  <div class="third_left">
                    <el-icon><User /></el-icon>
                    <span>用户名称</span>
                  </div>
                  <div class="third_right">
                    <span> 谭小海 </span>
                  </div>
                </el-col>
                <el-col :span="24" class="third_span">
                  <div class="third_left">
                    <el-icon><PhoneFilled /></el-icon>
                    <span>电话号码</span>
                  </div>
                  <div class="third_right">
                    <span> 111110000 </span>
                  </div>
                </el-col>
                <el-col :span="24" class="third_span">
                  <div class="third_left">
                    <el-icon><Promotion /></el-icon>
                    <span>用户邮箱</span>
                  </div>
                  <div class="third_right">
                    <span> 138@163.com </span>
                  </div>
                </el-col>
                <el-col :span="24" class="third_span">
                  <div class="third_left">
                    <el-icon><Management /></el-icon>
                    <span>所属角色</span>
                  </div>
                  <div class="third_right">
                    <span> 超级管理员 </span>
                  </div>
                </el-col>
                <el-col :span="24" class="third_span">
                  <div class="third_left">
                    <el-icon><Checked /></el-icon>
                    <span>创建日期</span>
                  </div>
                  <div class="third_right">
                    <span> 2023-02-03 11:11:26 </span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-aside>
        <el-main>
          <div class="left_user">
            <div class="first">
              <h3>基本资料</h3>
            </div>
            <div class="second">
              <el-tabs :tab-position="tabPosition" class="demo-tabs">
                <el-tab-pane label="基本资料">
                  <el-form
                    :label-position="labelPosition"
                    label-width="100px"
                    :model="formLabelAlign"
                    style="max-width: 460px"
                  >
                    <el-form-item label="用户昵称">
                      <el-input v-model="formLabelAlign.name" />
                    </el-form-item>
                    <el-form-item label="手机号码">
                      <el-input v-model="formLabelAlign.region" />
                    </el-form-item>
                    <el-form-item label="邮箱">
                      <el-input v-model="formLabelAlign.type" />
                    </el-form-item>
                    <el-form-item label="性别">
                      <el-radio-group v-model="formLabelAlign.resource">
                        <el-radio label="男" />
                        <el-radio label="女" />
                        <el-radio label="其他" />
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" plain>保存</el-button>
                      <el-button type="danger" plain>关闭</el-button>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="修改密码">
                  <el-form
                    :label-position="labelPosition"
                    label-width="100px"
                    :model="formLabelAlign"
                    style="max-width: 460px"
                  >
                    <el-form-item label="旧密码">
                      <el-input v-model="formLabelXiuMiMa.older" />
                    </el-form-item>
                    <el-form-item label="新密码">
                      <el-input v-model="formLabelXiuMiMa.new" />
                    </el-form-item>
                    <el-form-item label="确认密码">
                      <el-input v-model="formLabelXiuMiMa.comfirm" />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" plain>保存</el-button>
                      <el-button type="danger" plain>关闭</el-button>
                    </el-form-item>
                  </el-form></el-tab-pane
                >
              </el-tabs>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from "vue";

export default defineComponent({
  setup() {
    const tabPosition = ref("left");
    const srcList = [
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
      "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
      "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
      "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
      "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
      "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
      "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg"
    ];
    const labelPosition = ref("left");

    const formLabelAlign = reactive({
      name: "",
      region: "",
      type: "",
      resource: ""
    });
    const formLabelXiuMiMa = reactive({
      older: "",
      new: "",
      comfirm: ""
    });
    return {
      srcList,
      tabPosition,
      labelPosition,
      formLabelAlign,
      formLabelXiuMiMa
    };
  }
});
</script>
<style scoped lang="less">
.usercenter {
  .right_user {
    height: 500px;
    background-color: ghostwhite;
    overflow: hidden;
    .first {
      border-bottom: 1px solid;
      padding-left: 10px;
    }
    .second {
      .demo-image__preview {
        /deep/ .el-image {
          border-radius: 50%;
          width: 100px;
          height: 100px;
          left: 30%;
          margin-top: 20px;
        }
      }
      padding-bottom: 30px;
    }
    .third {
      .third_span {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #cfcfcf;
        margin-top: 20px;
        height: 20px;
      }
      width: 80%;
      margin: 0 auto;
    }
  }
  .el-main {
    padding-top: 0px;
    .left_user {
      height: 400px;
      background-color: #ffffff;
      overflow: hidden;
      .first {
        border-bottom: 1px solid;
        padding-left: 20px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
